import React, { Component } from 'react';
import OperationCss from './index.module.css'

export default class Operation extends Component {
  render() {
    const { todos, seletAll, clearAll } = this.props;
    let finished = todos.reduce((total, cur) => {
      total += (cur.done === true) ? 1 : 0;
      return total;
    }, 0);
    let styleObj = { display: `${finished === todos.length ? 'block' : 'none'}` }
    return (
      <div className={OperationCss.container}>
        <div>
          <input type="checkbox" className={OperationCss.inputBox} onChange={(ev) => {
            seletAll(ev.target.checked)
          }} checked={finished === todos.length}/>
          <span>已完成{finished}/全部{todos.length}</span>
        </div>
        <button className={OperationCss.opButton} style={styleObj} onClick={clearAll}>清空所有任务</button>
      </div>
    )
  }
}
